package com.example.firstdemo.ui.screens.pages.addProblem.addProblem.addDescription

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.firstdemo.ui.screens.components.SubPage
import com.example.firstdemo.ui.theme.AppTheme
import com.example.firstdemo.ui.theme.FontSize
import com.example.firstdemo.ui.theme.Space
import com.example.firstdemo.ui.theme.eColors


@Composable
fun AddDescriptionScreen(
    padding: PaddingValues = PaddingValues(0.dp),
    onBack: () -> Unit = {},
    onConfirm: (description: String) -> Unit = { _ -> }
) {
    val description = rememberTextFieldState("")
    SubPage(
        padding = padding,
        title = "新增故障(描述)",
        onBack = onBack
    ) {
        Column {
            Box(Modifier.padding(Space.medium, Space.medium, Space.medium, 0.dp)) {
                Column {
                    Text("故障描述", fontSize = FontSize.large)
                    Spacer(Modifier.height(Space.small))
                    TextField(
                        shape = MaterialTheme.shapes.medium,
                        colors = TextFieldDefaults.colors(
                            unfocusedContainerColor = MaterialTheme.eColors.background.base,
                            focusedIndicatorColor = Color.Transparent,
                            unfocusedIndicatorColor = Color.Transparent
                        ),
                        state = description,
                        lineLimits = TextFieldLineLimits.MultiLine(
                            minHeightInLines = 6,
                            maxHeightInLines = 10
                        ),
                        placeholder = {
                            Text(
                                text = "请输入故障描述",
                                fontSize = FontSize.medium,
                                color = MaterialTheme.eColors.text.placeholder
                            )
                        },
                        textStyle = TextStyle(color = MaterialTheme.eColors.text.regular),
                        modifier = Modifier.fillMaxWidth()
                    )
                }
            }
            Box(Modifier.padding(Space.medium, Space.medium, Space.medium, 0.dp)) {
                Button(
                    shape = MaterialTheme.shapes.medium,
                    onClick = {
                        onConfirm(description.text.toString())
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                ) {
                    Text(
                        text = "确认",
                        color = MaterialTheme.eColors.basic.white
                    )
                }
            }
        }
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun AddDescriptionScreenPreview() {
    AppTheme {
        AddDescriptionScreen()
    }
}